<template>
  <div class="main" >
    <div class="content-top" v-if="paramsList!==null">
      <div class="content-item" :class="{ 'selected': activeParam== indexDetail }"
           v-for="(itemDetail,indexDetail) in paramsList"
           @click="selectParam(itemDetail,indexDetail)"
           :key="indexDetail">
        {{ itemDetail.name }}
      </div>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" >
      <van-list
          class="list-item"
          :finished="finished"
          :finished-text="list.length === 0 ? '暂无数据' : '没有更多了'"
          v-model="loading"
          @load="onLoad"
      >
        <shop-list-item
            :articles="list">
        </shop-list-item>
      </van-list>
    </van-pull-refresh>
    
  </div>
</template>

<script>
import ShopListItem from "./shopListItem";
import {queryTypeList, searchForGoods} from "../../../api/shopping";

export default {
  name: "shopList",
  components: {ShopListItem},
  props: {
    obj: {
      type: Object,
      required: true // 必传
    }
  },
  data() {
    return {
      activeParam: 0,
      paramsList: [],
      list: [], // 数据列表
      loading: false, // 控制加载中的 loading 状态
      finished: false, // 控制加载结束的状态，当加载结束，不再触发加载更多
      current: 1, // 获取下一页数据current
      size: 10,
      chooseId: 0,
      isLoading:false,
      // reLoading:false
    }
  },
  async mounted() {
    this.paramsList = this.obj.children ? this.obj.children : []
    console.log('-------shopList----------', this.paramsList)
    this.chooseId = this.paramsList.length > 0 ? this.paramsList[0].id : null
    // this.onLoad()
  },
  watch: {
    'chooseId': {
      handler(newVal, oldVal) {
        console.log('activeParam newVal', newVal)
        this.onLoad()
      }
    }
  },
  methods: {
    selectParam(item, index) {
      console.log(item)
      this.activeParam = index
      this.chooseId = item.id
      // this.choose.stapleFoodName = item.name
      // this.choose.stapleFoodType = item.value
    },
    async onLoad() {
      this.loading = true
      const {data} = await searchForGoods({
        goodsType: this.chooseId,
        size: this.size,
        current: this.current,
      })
      console.log('------- goodsType -----',this.chooseId)
      if (data !== null) {
        const {records} = data
        // this.list.push(...records)
        this.list = records
        console.log('list', this.list)
        // 3. 加载结束
        this.loading = false
         if (this.isLoading) {
          this.$toast('刷新成功')
          this.isLoading = false
         }
        // this.reLoading = false
        if (records.length > 10) {
          this.current += 1
        } else {
          this.finished = true
        }
        // if (records.length <= 0) {
        //   this.finished = true
        // } else {
        //   this.finished = false
        // }
      } else {
        this.finished = true
      }
    },
    onRefresh(){
      this.current = 1
      this.list = []
      this.isLoading = true
      this.onLoad()
      // this.$toast('刷新成功')
    }
  }
}
</script>

<style scoped lang="less">
.main {
  .content-top {
    background: #F2EFEA;
    padding: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 1);
    max-height: 154px;
    overflow-y: scroll;

    .selected {
      background-color: rgba(242, 150, 0, 1);
      border-color: rgba(242, 150, 0, 1) !important;
      color: #ffffff !important;
    }

    .content-item {
      //flex-shrink: 0;
      width: calc((100% - 18px) / 3);
      height: 27px;
      margin-right: 6px;
      opacity: 1;
      border-radius: 13.5px;
      border: 1px solid rgba(166, 166, 166, 1);
      margin-bottom: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;

      font-size: 14.55px;
      font-weight: 400;
      //line-height: 25px;
      color: rgba(128, 128, 128, 1);
      text-align: center;
      vertical-align: top;
    }

    .content-item:nth-of-type(3n + 0) {
      margin-right: 0px;
    }
  }


}
</style>
